<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="searchForm.real_name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="searchForm.phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-table :data="tableData" border stripe>
        <el-table-column prop="raw_data.real_name" label="用户姓名" />
        <el-table-column prop="raw_data.phone" label="用户手机号" />
        <el-table-column width="200px" prop="raw_data.identity_num" label="用户身份证号" />
        <el-table-column prop="raw_data.sex" label="性别">
          <template slot-scope="{ row }">
            {{ row.raw_data.sex=='1'?'男':'女' }}
          </template>
        </el-table-column>

        <el-table-column prop="subdistrict_name" label="所属小区" />


        <el-table-column prop="raw_data.building_no" label="幢" />
        <el-table-column prop="raw_data.unit" label="单元" />
        <el-table-column prop="raw_data.room_num" label="室" />

        <el-table-column prop="face_img" label="是否录入人脸">
          <template slot-scope="{ row }">
            <el-image
              v-if="row.face_img"
              style="width: 100px; height: 100px"
              :src="row.face_img"
              :preview-src-list="[row.face_img]"
            />
            <span v-else>暂未录入</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <template v-if="row.status == 1">
              <el-button type="text" @click="changeStatus(row.id, 2)"
                >通过</el-button
              >
              <el-button type="text" @click="changeStatus(row.id, 3)"
                >不通过</el-button
              >
            </template>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10,20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>
  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit } from "@/utils/mixins";
export default {
  mixins: [table, addOrEdit],
  data: () => ({
    isLoading: true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    searchForm:{
      status:1,
      real_name:"",
      phone:"",
      subdistrict_id:"",
      page:1,
      per_page:10
    },
    communityList: [],
  }),

  created() {
    this.getList()
    API.getCommunityList().then(({data})=>{
      this.communityList=data.items.map(item=>{
        return {id:item.id,name:item.name}
      })

    })

  },

  methods: {
    // 列表
    getList(){
      API.getHouseholdAuditList(this.searchForm)
        .then(({ data }) => {
          data.items.forEach(item=>{
            item.status=parseInt(item.status)
            item.raw_data.phone=item.raw_data.phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
            item.raw_data.identity_num=item.raw_data.identity_num.replace(/^(.{6})(?:\d+).(.{4})$/,'$1****$2')
            item.subdistrict_name=this.communityList.filter(sitem=>{
              return sitem.id==item.raw_data.subdistrict_id
            })[0].name
          })

          this.tableData = data.items
          this.tableTotal = data.total
        })
        .catch((err) => {
          this.tableData = []
          this.tableTotal=0
        });
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 审核
    changeStatus(id, status) {
      API.setHouseholdAuditStatus(id, status)
        .then(() => {
          this.$message.success("状态更新成功！");
          this.getList();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped></style>
